import React, { useState, useEffect } from 'react';
import { Modal, Form, Button, Select, Input } from 'antd';
import FileUpload from '@/components/Custom/FileUpload';
import styles from './index.less';

const { Option } = Select;
const { TextArea } = Input;
const RevalAplModal = ({ form, visible, setVisible, onOk, onCancel }) => {
    const { getFieldDecorator } = form;
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [disabled, setDisabled] = useState(false);
    const [peopleList, setPeopleList] = useState([]);
    const handleOk = () => {
        form.validateFields(async (err, values) => {
            if (err) return;
            setConfirmLoading(true);
            console.log(values, '============values');
            if (onOk) {
                setConfirmLoading(false);
                setVisible(false);
                form.resetFields();
            }
        });
    };
    const handleCancel = () => {
        if (onCancel) onCancel();
        setVisible(false);
    };
    const formLayout = {
        wrapperCol: { span: 18 },
        labelCol: { span: 6 }
    };
    const cancelButton = (
        <Button onClick={handleCancel} style={{ marginRight: 36 }}>
            取消
        </Button>
    );
    const okButton = (
        <Button type="primary" onClick={handleOk} loading={confirmLoading}>
            确定
        </Button>
    );

    useEffect(() => {
        setPeopleList([
            { value: '黄兰兰', key: 1 },
            { value: 'lifeifei', key: 11 },
            { value: '刘贝贝', key: 12 },
            { value: '李青', key: 13 }
        ]);
    }, []);
    useEffect(() => {
        if (
            form.getFieldValue('files') &&
            form.getFieldValue('files').allFileList &&
            form.getFieldValue('files').allFileList.length >= 5
        ) {
            setDisabled(true);
        } else {
            setDisabled(false);
        }
    }, [form.getFieldValue('files')]);

    return (
        <Modal
            title="重评申请"
            visible={visible}
            confirmLoading={confirmLoading}
            onOk={handleOk}
            destroyOnClose
            onCancel={handleCancel}
            footer={null}
        >
            <div>
                <div>
                    <Form {...formLayout}>
                        <Form.Item label="选择重估人员">
                            {getFieldDecorator('people', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请选择重估人员'
                                    }
                                ],
                                initialValue: null
                            })(
                                <Select placeholder="请选择重估人员">
                                    {peopleList.map(item => (
                                        <Option key={item.key} value={item.value}>
                                            {item.value}
                                        </Option>
                                    ))}
                                </Select>
                            )}
                        </Form.Item>
                        <Form.Item label="原因">
                            {getFieldDecorator('reason', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入原因'
                                    },
                                    { min: 1, max: 500, message: '请输入1~500个字符' }
                                ],
                                initialValue: null
                            })(<TextArea rows={4} placeholder="请输入原因" />)}
                        </Form.Item>
                        <Form.Item
                            label="附件"
                            extra={
                                <span style={{ wordBreak: 'break-all' }}>
                                    （支持非运行文件格式，每个文件大小不超过50M，最多上传5个附件）
                                </span>
                            }
                        >
                            {form.getFieldDecorator(
                                'files',
                                {}
                            )(
                                <FileUpload
                                    checkFileSize={50}
                                    checkFileSizeMsg="文件大小不能超过50MB"
                                    disabled={disabled}
                                />
                            )}
                        </Form.Item>
                    </Form>
                </div>
                <div className={styles.modalButton}>
                    {cancelButton}
                    {okButton}
                </div>
            </div>
        </Modal>
    );
};

export default Form.create()(RevalAplModal);
